import { Map, TileLayer, VectorLayer } from 'maptalks'
import { pickCenterPoint, calcResolutionForDistance, calcDistanceForResolution, toDegrees, toRadians } from "./core";

// const options = {
//     animation: false,
//     baseLayerPicker: false,
//     vrButton: false,
//     fullscreenButton: false,
//     geocoder: false,
//     homeButton: false,
//     infoBox: true,
//     sceneModePicker: false,
//     selectionIndicator: false,
//     timeline: false,
//     navigationHelpButton: false,
//     navigationInstructionsInitiallyVisible: true,
//     scene3DOnly: false,
//     shouldAnimate: false,
//     creditContainer: document.createElement("div"),
//     // terrainExaggeration: 1,
//     // terrainProvider: new Cesium.EllipsoidTerrainProvider(),
//     // imageryProvider: ,
//     contextOptions: {
//         webgl: {
//             alpha: true,
//             depth: false,
//             stencil: true,
//             antialias: true,
//             premultipliedAlpha: true,
//             preserveDrawingBuffer: true,//通过canvas.toDataURL()实现截图需要将该项设置为true
//             failIfMajorPerformanceCaveat: true
//         }, allowTextureFilterAnisotropic: true
//     },
//     baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
//         name: 'arcgisonline',
//         url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
//     })),
//     baseLayerPicker: false,
// }

var mapOptions = {
    scene: {
        center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
        showSun: false,
        showMoon: false,
        showSkyBox: true,
        showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
        fog: true,
        fxaa: true,
        globe: {
            showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
            depthTestAgainstTerrain: false,
            baseColor: "black"
        },
        cameraController: {
            zoomFactor: 3.0,
            minimumZoomDistance: 1,
            maximumZoomDistance: 50000000,
            enableRotate: true,
            enableZoom: true
        }
    },
    control: {
        baseLayerPicker: false, // basemaps底图切换按钮
        homeButton: false, // 视角复位按钮
        sceneModePicker: false, // 二三维切换按钮
        navigationHelpButton: false, // 帮助按钮
        fullscreenButton: false, // 全屏按钮
        contextmenu: { hasDefault: false } // 右键菜单
    },
    basemaps: [{
        name: '离线地图',
        // icon: 'img/basemaps/mapboxSatellite.jpg',
        type: 'xyz',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        maximumLevel: 12,
        show: true
    }],
}

var cMap = new mars3d.Map("container3d", mapOptions);

let mMap = new Map('map', {
    zoom: 5,
    center: [114, 30],
    baseLayer: new TileLayer('base', {
        urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
    })
})

const cesiumDiv = document.getElementById('container3d')
const mtkDiv = document.getElementById('map')

mtkDiv.hidden = true

/**
 * @param input Input coordinate array.
 * @param opt_output Output array of coordinate values.
 * @param opt_dimension Dimension.
 * @return Input coordinate array (same array as input).
 */
export function identityProjection(input, opt_output, opt_dimension) {
    const dim = opt_dimension || input.length;
    if (opt_output) {
        for (let i = 0; i < dim; ++i) {
            opt_output[i] = input[i];
        }
    }
    return input;
}

const camera = cMap.viewer.camera
const scene = cMap.viewer.scene

const res0 = mMap.getSpatialReference().getResolutions()[0]


let zoomToSwitch = -1

const cmap_cameraChangedHandler = () => {
    let bestTarget = pickCenterPoint(scene)
    const distance = Cesium.Cartesian3.distance(bestTarget, camera.position);
    if (distance < 4921021.5333821215) {
        zoomToSwitch = switch2mMap()
        mtkDiv.hidden = false
    }
    // // TODO
    // 3624.213338699059
}

let switch2mMap = function () {
    const ellipsoid = Cesium.Ellipsoid.WGS84;
    // center
    let bestTarget = pickCenterPoint(scene)
    if (!bestTarget) {
        //TODO: how to handle this properly ?
        const globe = scene.globe;
        const carto = camera.positionCartographic.clone();
        const height = globe.getHeight(carto);
        carto.height = height || 0;
        bestTarget = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto);
    }
    const distance = Cesium.Cartesian3.distance(bestTarget, camera.position);
    console.info('distance', distance)
    const bestTargetCartographic = ellipsoid.cartesianToCartographic(bestTarget)
    let center = identityProjection([toDegrees(bestTargetCartographic.longitude), toDegrees(bestTargetCartographic.latitude)])
    mMap.setCenter(center);
    console.info('center', center)

    // resolution
    let resolution = calcResolutionForDistance(distance, bestTargetCartographic ? bestTargetCartographic.latitude : 0, scene)
    console.log(resolution);

    const curZoom = Math.log(res0 / resolution) / Math.log(2)
    console.log(curZoom);

    // heading
    // const up = cCamera.up;
    // const right = cCamera.right;
    // const normal = new Cesium.Cartesian3(-bestTarget.y, bestTarget.x, 0); // what is it?
    // const bearing = Cesium.Cartesian3.angleBetween(right, normal);
    // console.log(bearing)
    mMap.setView({
        zoom: curZoom,
        pitch: toDegrees(camera.pitch + Math.PI / 2),
        bearing: toDegrees(camera.heading)
    })



    //off移除事件
    cMap.off(mars3d.EventType.cameraChanged, cmap_cameraChangedHandler, this)


    // document.body.insertBefore(cesiumDiv, mtkDiv)

    return curZoom


}

let switch2cesium = function () {
    const zoom = mMap.getZoom()
    const centerXY = [mMap.getCenter().x, mMap.getCenter().y]
    const mPitch = mMap.getPitch()
    const mBearing = mMap.getBearing()
    const carto = new Cesium.Cartographic(toRadians(centerXY[0]), toRadians(centerXY[1]))
    if (scene.globe) {
        const height = scene.globe.getHeight(carto);
        carto.height = height || 0;
    }

    const destination = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto);

    const orientation = {
        pitch: toRadians(mPitch) - Math.PI / 2,
        heading: toRadians(mBearing),
        roll: undefined
    };
    camera.setView({
        destination,
        orientation
    })

    const resolution = res0 / Math.pow(2, zoom)
    const distance = calcDistanceForResolution(resolution || 0, toRadians(centerXY[1]), scene)
    console.log('distance', distance);
    camera.moveBackward(distance)
    //on绑定事件
    cMap.on(mars3d.EventType.cameraChanged, cmap_cameraChangedHandler, this)
}





//on绑定事件
cMap.on(mars3d.EventType.cameraChanged, cmap_cameraChangedHandler, this)



mMap.on('zoomend', e => {
    if (e.from > e.to && e.to < zoomToSwitch) {
        switch2cesium()
        mtkDiv.hidden = true
    }
})
window._switch2mMap = switch2mMap
window._mMap = mMap
window._cCamera = camera
